﻿<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <link href="/css/global.css" rel="stylesheet">
    <link href="/css/styles.css" rel="stylesheet">
    <script type="text/javascript">
        function ajax() {
            $(".recommand").off("click");
            var input = document.getElementById("input").innerHTML;
            chat("rightBubble");
            var jsons = JSON.stringify({
                input: input,
            });
            var xhr = new XMLHttpRequest;//创建一个 XMLHttpRequest 对象，XMLHttpRequest是实现ajax的基础
            xhr.open("POST", "/Home/ChatAsync", true)//请求方式为"Post","/Home/Index"为服务器地址（在MVC这里就是控制器地址+方法名），true表示选择异步
            xhr.setRequestHeader("Content-type", "application/json")//设置请求参数类型
            xhr.send(jsons);

            $('.chat-info').html('');//清空输入框
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {//readyState 等于 4 且状态为 200 时，表示响应已就绪：
                    var s = xhr.responseText;
                    chat("leftBubble", "/images/小鹿.jpg", JSON.parse(s).result);
                    $(".recommand").on("click", function () {
                        $('.chat-info').html($(this).text());
                        ajax();
                    })

                }
            }
        }</script>
</head>

<body class="chat-bg">
   
    <section class="chat-box">
        <div class="bubbleDiv"></div>
    </section>
    <footer class="chat-edit clearfix">
        <p id="input" class="chat-info" contenteditable="true"></p>
        <button id="sumbit" onclick="ajax()" class="send-btn fr">发 送</button>
    </footer>

    <script src="/js/jquery-1.8.3.min.js"></script>
    <script>
        function chat(element, imgSrc, doctextContent) {
            //判断传入的值，是用户还是小鹿
            var $user = element;
            var $doctorHead = imgSrc;
            //获取输入的值
            var $textContent = $('.chat-info').html();
            //获取传入的医生输入的内容
            var $doctextContent = doctextContent;
            //获取容器
            var $box = $('.bubbleDiv');
            var $boxHeght = $box.height();
            var $sectionHeght = $(".chat-box").height();
            var $elvHeght = Math.abs($boxHeght - $sectionHeght);
            //左侧消息
            if ($user === "leftBubble") {
                $box.append(createdoct(imgSrc, $doctextContent)).animate({ scrollTop:9999 }, 300);// $(document).height()
            }
            //用户消息
            else if ($user === "rightBubble") {
                $box.append(createuser($textContent)).animate({ scrollTop:9999  }, 300);//$(document).height()
            } else {
                console.log("请传入必须的参数");
            }

        }
        function createdoct(imgSrc, $doctextContent) {
            var $textContent = $doctextContent;
            var $imgSrc = imgSrc;
            var block;
            if ($textContent == '' || $textContent == 'null') {
                chat("leftBubble", "/images/小鹿.jpg", "亲，你说的这个小鹿还不是很懂哦，小鹿会请教工程师爸爸努力学会的");
                return;
            }
            block = '<div class="bubbleItem">' +
                '<div class="doctor-head">' +
                '<img src="' + imgSrc + '" alt="doctor"/>' +
                '</div>' +
                '<span class="bubble leftBubble">' + $textContent + '<span class="topLevel"></span></span>' +
                '</div>';

            return block;
        };

        function createuser($textContent) {
            var $textContent = $textContent;
            var block;
            if ($textContent == '' || $textContent == 'null') {
                alert("亲，别太着急说点什么吧～")
                return;
            }
            block = '<div class="bubbleItem clearfix">' +
                '<span class="bubble rightBubble">' + $textContent + '<span class="topLevel"></span></span>' +
                '</div>';
            return block;
        };
        $(document).ready(function () {
            chat("leftBubble", "/images/小鹿.jpg", "Hello! 我是小鹿，快来和我聊天吧。");
            chat("leftBubble", "/images/小鹿.jpg", " AI小鹿 1.1版本更新公告：<hr /><ul><li>知识库系统：小鹿更加聪明啦！目前预置了阿里云预设的200多个“知识”类目，包括但不限于电脑维修、股票期权等问题</li><li>推荐功能:能够根据模糊的关键词进行智能推荐，进一步拒绝尬聊，比如问我‘电脑’试试</li><li>优化了部分代码，使用更流畅～</li></ul><hr/>最后小鹿祝大家猪年文体两开花！");
        })
    </script>
</body>
</html>